<template>
  <div class="ticket">
    <div class="ticket-item" v-for="(v, i) in fakeList" :key="i">
      <img :src="v.img" alt="">
      <ul>
        <li class="title">{{ v.title }}</li>
        <li class="info">{{ v.info }}</li>
        <li class="sale"><span class="tag">销售价格:</span> <span class="price">{{ v.salePrice }}</span></li>
        <li><span class="tag">分销佣金:</span> <span class="price">{{ v.distributionPrice }}</span></li>
      </ul>
    </div>
  </div>
</template>
 
<script >
export default {
  props: {
    list: [],
  },
  data() {
    return {
      fakeList: [
        {
          img: require('../assets/图1.png'),
          title: '【云之上门票19:00场】普通票',
          info: '峨眉|云之上情景体验剧场',
          salePrice: '238.0',
          distributionPrice: '118.0',
        },
        {
          img: require('../assets/图1.png'),
          title: '【云之上门票19:00场】普通票',
          info: '峨眉|云之上情景体验剧场',
          salePrice: '268.0',
          distributionPrice: '128.0',
        },
        {
          img: require('../assets/图2.png'),
          title: '【云之上门票20:00场】普通票',
          info: '峨眉|云之上情景体验剧场',
          salePrice: '268.0',
          distributionPrice: '128.0',
        },
      ]
    }
  },
  methods: {

  }
}
</script>
 
<style lang='scss' scoped>
.ticket {
  .ticket-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:not(:last-child) {
      margin-bottom: 54px;
    }

    img {
      width: 250px;
      height: 166px;
    }

    ul {
      width: 400px;

      .title {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #404040;
        margin-left: -10px;
      }

      .info {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #808080;
        margin: 10px 0 12px;
      }

      .sale {
        margin-bottom: 10px;
      }

      .tag {
        font-size: 26px;
        color: #101010;
      }

      .price {
        font-size: 26px;
        color: #F30000;
      }
    }
  }
}
</style>